$diamonds--item-size: 160px;
$diamonds--item-rotated-size: floor(sqrt(2 * pow($diamonds--item-size, 2)));
$a: -140px;
$b: 20px;
$diamonds--items: #ff96b5 #ef6991 #ff96b5 #f199b2 #ef6991 #eb83a2,
                      #f4a7be #f8aac1 (#d0156e url("/images/diamonds--logo.svg") $a $a no-repeat) #e293aa #ee97b0,
                  #ff96b5 (#ca1f70 url("/images/diamonds--logo.svg") $a $b no-repeat) (#ca1b6e url("/images/diamonds--logo.svg") $b $a no-repeat) #ff96b5,
                      #eb83a2 (#c42872 url("/images/diamonds--logo.svg") $b $b no-repeat) #f8aac1,
                  #ff96b5 #f199b2,
                      #eca2b8;

.diamonds {
  display: block;
  height: 61vw;
  max-height: 700px;
  min-height: 480px;
  @include transition(all, 0.5s);

  .-subpage- & {
    height: 21vw;
    min-height: 220px;
  }
}

.diamonds--container {
  left: 50%;
  position: absolute;
  top: 0;
  width: length(nth($diamonds--items, 1)) * $diamonds--item-rotated-size;
  z-index: 1;
  @include transform-origin(0 0 0);
  @include transform(translateX(-50%));

  $last-max-width: 0;
  @for $i from 5 to 7 {
    $scale: $i / 5 - 0.3;
    $max-width: $i * 200px;

    @media all and (min-width: #{$last-max-width + 1px}) and (max-width: #{$max-width}) {
      @include transform(scale($scale) translateX(-50%));
    }

    $last-max-width: $max-width;
  }
}

.diamonds--item {
  $margin: floor(($diamonds--item-rotated-size - $diamonds--item-size) / 2);
  float: left;
  height: $diamonds--item-size;
  margin: floor($diamonds--item-size / -2) $margin $margin;
  position: relative;
  text-align: center;
  width: $diamonds--item-size;
  @include transition(transform, 0.5s);

  &::after,
  &::before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    @include transform(rotateZ(45deg) rotateX(180deg) rotateY(180deg));
  }

  &::after {
    @include transition(transform, 0.15s);
    @include backface-visibility(hidden);
    z-index: 3;
  }

  &:hover::after {
    @include transform(rotateZ(45deg) rotateX(0deg) rotateY(180deg));
  }

  .-subpage- & {
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(5),
    &:nth-child(6),
    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(10),
    &:nth-child(11),
    &:nth-child(12),
    &:nth-child(15),
    &:nth-child(16),
    &:nth-child(18),
    &:nth-child(19),
    &:nth-child(20),
    &:nth-child(21) {
      &::after {
        background: transparent;
      }
    }

    &:nth-child(9) {
      @include transform(scale(0.5));
      @include transform-origin(50% -33px 0);
      transform-origin: 50% -33px 0;
    }

    &:nth-child(13) {
      @include transform(scale(0.5));
      @include transform-origin(193px -146px 0);
      transform-origin: 193px -146px 0;
    }

    &:nth-child(14) {
      @include transform(scale(0.5));
      @include transform-origin(-33px -146px 0);
      transform-origin: -33px -146px 0;
    }

    &:nth-child(17) {
      @include transform(scale(0.5));
      @include transform-origin(50% -259px 0);
      transform-origin: 50% -259px 0;
    }
  }

  $item-number: 0;
  $row-number: 0;
  @each $row in $diamonds--items {
    $current-item-number: 0;
    $row-number: $row-number + 1;
    @each $item in $row {
      $item-number: $item-number + 1;
      $current-item-number: $current-item-number + 1;

      &:nth-child(#{$item-number}) {
        &::after {
          @if $current-item-number == 1 or $current-item-number == length(nth($diamonds--items, $row-number)) {
            background: scale-color(lighten($item, 10%), $lightness: 70%, $saturation: 70%);
            background: $item;
          }
          @else {
            background: $item;
          }
        }

        @if $current-item-number == 1 {
          clear: left;
          margin-left: floor($diamonds--item-rotated-size / 2 * ($row-number - 1) + $margin);
        }
      }
    }
  }
}

.diamonds--item-version,
.diamonds--item-version-title,
.diamonds--item-changelog,
.diamonds--item-link {
  color: mix($pink, black, 80%);
  position: relative;
  text-transform: uppercase;
  z-index: 4;
}

.diamonds--item-version-title,
.diamonds--item-changelog {
  cursor: pointer;
  margin: ($diamonds--item-size / 2 + 20px) 0 -3px;
  padding: 1px 5px 0;
}

.diamonds--item-version-title {
  @extend %display-inline-block;

  .diamonds--item:hover & {
    @extend %display-none;
  }
}

.diamonds--item-version,
.diamonds--item-link {
  font-size: 24px;
  font-weight: bold;
}

.diamonds--item-link {
  left: 50%;
  padding: 2px 8px 0;
  position: absolute;
  top: 75%;
  @include transform(translate(-50%, -50%));
}

.diamonds--item-changelog {
  @extend %display-none;

  .diamonds--item:hover & {
    @extend %display-inline-block;
  }
}

.diamonds--item-changelog,
.diamonds--item-link {
  &:hover {
    background: $pink;
    color: $white;
  }
}

.diamonds--item-tagline {
  color: #ffabc2;
  font-size: 18px;
  font-weight: bold;
  left: -53%;
  line-height: 1.1;
  position: absolute;
  right: -53%;
  top: 10px;
  z-index: 4;
  @include transition(transform, 0.15s);

  .diamonds--item:hover & {
    @include transform(scale(1.2));
  }

  .-subpage- & {
    opacity: 0;
    @include transform(scale(0.8));
  }
}
